<!-- 展示树结构的列表 -->
<div id="treeDiv"
	 style="display:none; padding: 5px; max-height: 400px; position: absolute; border: 1px solid rgb(204, 204, 204); background-color: rgb(255, 255, 255); z-index: 10000; overflow-y: scroll; top: 183.636px; left: 412.42px;">
	<ul id="treeList" class="ztree" style="margin-top: 0; width: 160px;">
	</ul>
</div>

<script>
	
	/**
	 * 请求接口获取数据,并将数据以树的结构展示。
	 * @param
	 * @return
	 * @author cjw 2020-03-30
	 */
	function getTreeData(that, url, requestData, callback) {
		
		$.ajax({
			url: url,
			type: "post",
			async: false,
			data: {
				...requestData,
			},
			success: function (res) {
				//console.log("getTreeData.res", res);
				
				// layer.msg("月落乌啼霜满天，",{
				// 	time: 1000,
				// 	icon:1
				// });
				
				//存储树结构的列表数据
				var treeData = res.data;
				//渲染树结构。
				renderTreeView(that, treeData, callback);
				
			},
			error: function () {
				layer.msg("请求出错");
			}
		});
	}
	
	/**
	 * 渲染树结构。
	 * @param
	 * @return
	 * @author cjw 2020-03-30
	 */
	function renderTreeView(that, treeData, callback) {
		
		var treeSetting = {
			async: {
				enable: true
			},
			view: {
				selectedMulti: false, //是否允许多选
				showIcon: true,//设置 zTree 是否显示节点的图标。默认值：true
				showLine: true,//设置 zTree 是否显示节点之间的连线。默认值：true
				fontCss: {color: "#333"}
			},
			data: {
				simpleData: {
					enable: true,
					idKey: "id",
					pIdKey: "pid",
					rootPId: 0
				}
			},
			callback: {
				//zTree节点的点击事件
				onClick: zTreeClick
			}
		};
		
		//点击某个节点时,获取该节点的值
		function zTreeClick(e, treeId, treeNode) {
			//执行回调函数
			callback(e, treeId, treeNode);
			//隐藏zTree
			hideTreeDiv();
		}
		
		$.fn.zTree.init($("#treeList"), treeSetting, treeData);
		initTreeEvent(that);
	}
	
	//显示树
	function showTreeDiv(that) {
		var tree = $(that);
		var treeOffset = $(that).offset();
		$("#treeDiv").css({left: treeOffset.left + "px", top: treeOffset.top + tree.outerHeight() + "px"});
		$("#treeDiv").slideDown("fast");
	}
	
	//隐藏树
	function hideTreeDiv() {
		$("#treeDiv").fadeOut("fast");
	}
	
	//初始化树的事件。
	function initTreeEvent(that) {
		//鼠标获得焦点的时候，显示树
		$(that).focus(function () {
			showTreeDiv(that);
		});
	}
	
	
	
	

</script>
